<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>榜单</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../css/mui.css">
		<link rel="stylesheet" href="../../css/base.css">
		<link rel="stylesheet" type="text/css" href="top.css" />

	</head>

	<body>
		<div class="mui-content background-white">
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#" data-movie-id="5361544" data-movie-title="兵临城下之决战要塞">
							<img src="../../images/banner3.jpg">
						</a>
					</div>
					<!-- 第一张 -->
					<div class="mui-slider-item">
						<a href="#" data-movie-id="26813313" data-movie-title="三日危情2016">
							<img src="../../images/banner1.jpg ">
						</a>
					</div>
					<!-- 第二张 -->
					<div class="mui-slider-item">
						<a href="#" data-movie-id="25904382" data-movie-title="撞青春">
							<img src="../../images/banner2.jpg ">
						</a>
					</div>
					<!-- 第三张 -->
					<div class="mui-slider-item">
						<a href="#" data-movie-id="5361544" data-movie-title="兵临城下之决战要塞">
							<img src="../../images/banner3.jpg ">
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#" data-movie-id="26813313" data-movie-title="三日危情2016">
							<img src="../../images/banner1.jpg ">
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>

			<div class="group ">
				<div class="item">
					<div id="top250" class="billboard billboard-gradient-one">
						<span class="billboard-title ">
							Top250
						</span>
					</div>
				</div>
				<div class="item">
					<div id="usBox" class="billboard billboard-gradient-two">
						<span class="billboard-title ">
							北美票房榜
						</span>
					</div>
				</div>
			</div>

			<p class="dark-medium content-desc ">即将上映</p>

			<div id="movies" class="mui-scroll-wrapper">
				<div class="mui-scroll ">
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell " v-for="item in movies " @tap="viewMovieDetail(item) ">
							<img class="mui-pull-left item-img " :src="item.cover " />
							<div class="mui-ellipsis dark-big ">{{item.title}}</div>
							<div class="mui-ellipsis ">
								<span class="gray-small">类型: {{item.genres}}</span>&nbsp;
								<span v-if="item.score>0" class="orange-small">{{item.score}}分&nbsp;</span>
								<span v-else class="orange-small">暂无评分&nbsp;</span>
							</div>
							<div class="mui-ellipsis gray-small">
								导演：{{item.directors}}
							</div>
							<div class="mui-ellipsis gray-small">
								主演：{{item.casts}}
							</div>
						</li>
					</ul>
				</div>
			</div>

		</div>

		<script src="../../js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="top.js" type="text/javascript" charset="utf-8"></script>

	</body>

</html>